<script type="text/javascript">
	$(document).ready(function () {
        var user_task = "CREATE";
        var btn_user_task = "";
		var gridExpandVar = 0;
		var formExpandVar = 0;
        var editrow = -1;
		
		var navbar = $("#jqxNavigationBar");
		navbar.jqxNavigationBar({ width: '100%', height: 420, sizeMode: 'auto', theme: theme });
		
		/* START DATA */
		// prepare the data
		var source =
		{
			datatype: "json",
			datafields: [
				{ name: 'user_id' },
				{ name: 'user_name' },
				{ name: 'user_aktif'},
				{ name: 'group_id'},
				{ name: 'group_name'}
			],
			id: 'user_id',
			url: 'index.php?c=c_user&m=get_user_list',
			root: 'data'
		};
		var dataAdapter = new $.jqx.dataAdapter(source);
		
		$("#jqxgrid").jqxGrid(
		{
			width: '100%',
			source: dataAdapter,
			theme: theme,
			sortable: true,
            pageable: true,
            autoheight: true,
			columns: [
				{ text: 'NAMA USER', dataField: 'user_name', width: 180 },
				{ text: 'GROUP', dataField: 'group_name', width: 180 },
				{ text: 'AKTIF', dataField: 'user_aktif', width: 100 },
				{ text: '', datafield: 'Edit', width: 125, columntype: 'button', cellsrenderer: function () {
					return "Edit";
				}, buttonclick: function (row) {
					// open form Create/Update.
					editrow = row;
					
					// get the clicked row's data and initialize the input fields.
					var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
					cu_formSet(dataRecord);
				}
				}
			]
		});
		/* END DATA */

		/* START FORM */
		//initialize field
		$('.text-input').addClass('jqx-input');
		$('.text-input').addClass('jqx-rc-all');
		$('.text-input').width(200);
		$('.text-input').height(23);
		if (theme.length > 0) {
			$('.text-input').addClass('jqx-input-' + theme);
			$('.text-input').addClass('jqx-widget-content-' + theme);
			$('.text-input').addClass('jqx-rc-all-' + theme);
		}
		var textfield_userid = $("#user_id");
		var textfield_username = $("#user_name");
		var textfield_userpass = $("#user_pass");
		var combofield_usergroup = $("#user_group");
		var radiofield_aktifyes = $("#jqxRadioAktifYes");
		var radiofield_aktifno = $("#jqxRadioAktifNo");
		
		var create_btn = $("#createBtn");
		var save_btn = $("#Save");
		var cancel_btn = $("#Cancel");
		
        radiofield_aktifyes.jqxRadioButton({ width: 50, height: 25, checked: true, theme: theme });
        radiofield_aktifno.jqxRadioButton({ width: 50, height: 25, checked: false, theme: theme });
		
		// initialize the popup window and buttons.
		create_btn.jqxButton({ theme: theme });
		save_btn.jqxButton({ theme: theme });
		cancel_btn.jqxButton({ theme: theme });

		//CB Group
        var source_urlCBGroup = "index.php?c=c_user&m=get_group_list";
        var source_columnsCBGroup = [
			{ name: 'group_id' },
            { name: 'group_name' }
		];
 		var sourceCBGroup = {
			datatype: "json",
            datafields: source_columnsCBGroup,
            id: 'group_id',
            url: source_urlCBGroup,
            root: 'data'
		};
        var dataAdapterCBGroup = new $.jqx.dataAdapter(sourceCBGroup);
        combofield_usergroup.jqxComboBox({ source: dataAdapterCBGroup, displayMember: "group_name", valueMember: "group_id", width: 200, height: 23, theme: theme });
		
		var userForm = $('#userForm');
		userForm.jqxValidator({
			rules: [
				   { input: textfield_username, message: 'Username harus diisi!', action: 'keyup', rule: 'required' },
				   { input: textfield_username, message: 'Username tidak boleh berisi spasi!', action: 'keyup', rule: function(){
						var value = textfield_username.val();
						if(value.indexOf(' ') >= 0){return false;}else{return true;}
					}
				   }
				   ],
			theme: theme
		});
		
		var saving_notice = $("#saveGradeNotice");
		var ok = $("#ok");
		var message_notice = $('#eventLog');
		saving_notice.jqxWindow({ width: 320, height: 110, resizable: false, theme: theme, isModal: true, autoOpen: false, okButton: $("#ok"), modalOpacity: 0.05, position: { x: 400, y: 100 } });
        ok.jqxButton({ theme: theme });
        /* END FORM */
		
		/* START ACTION */
        // update the edited row when the user clicks the 'Save' button.
        save_btn.click(function () {
			var form_validate = userForm.jqxValidator('validate');
			if(form_validate){
				var user_id_field = "";
				var user_name_field = "";
				var user_pass_field = "";
				var user_group_field = "";
				var user_aktif_field = "";
				
				if(textfield_userid.val() !== null || textfield_userid.val() !== ''){
					user_id_field = textfield_userid.val();
				}
				if(textfield_username.val() !== null || textfield_username.val() !== ''){
					user_name_field = textfield_username.val();
				}
				if(textfield_userpass.val() !== null || textfield_userpass.val() !== ''){
					user_pass_field = textfield_userpass.val();
				}
				if(combofield_usergroup.jqxComboBox('getSelectedItem') !== null){
					user_group_field = combofield_usergroup.jqxComboBox('getSelectedItem').value;
				}
				if(radiofield_aktifyes.jqxRadioButton('checked') == true){
					user_aktif_field = "Y";
				}else{
					user_aktif_field = "T";
				}
				
				var row = {
						task: user_task,
						user_id: user_id_field,
						user_name: user_name_field,
						user_pass: user_pass_field,
						user_group: user_group_field,
						user_aktif: user_aktif_field
				};
				
				if (editrow >= 0) {
					//edit row
					$.ajax({
						type: 'POST',
						url: 'index.php?c=c_user&m=get_action',
						data: row,
						success: function(response){
							//if(response==1){
								$('#jqxgrid').jqxGrid('updatebounddata');
								gridExpand();
							//}
						}
					});
				}else{
					//add row
					$.ajax({
						type: 'POST',
						url: 'index.php?c=c_user&m=get_action',
						data: row,
						success: function(response){
							if(response==1){
								$('#jqxgrid').jqxGrid('updatebounddata');
								gridExpand();
							}
						}
					});
					
				}
			}else{
				createNotice("Isian data belum lengkap!");
			}
        });

        cancel_btn.click(function () {
        	cu_formReset();
        	$("#popupWindow").jqxWindow('hide');
        	gridExpand();
        });
		
		create_btn.click(function () {
        	btn_user_task = "CREATE";
			
        	cu_formReset();
			
        	formExpand();

        	textfield_username.prop('disabled', false);
        	
        	textfield_userid.val(0);
			
			textfield_username.focus();
        });
		
		ok.click(function(){
        	message_notice.empty();
        	saving_notice.jqxWindow('hide');
        });
        
        /* END ACTION */

        /* START FUNCTION */
		function cu_formReset(){
			textfield_userid.val(0);
			textfield_username.val("");
			textfield_userpass.val("");
			radiofield_aktifyes.jqxRadioButton({ checked: true });
			
			userForm.jqxValidator('hide');
        }

        function cu_formSet(dataRecord){
            btn_user_task = "UPDATE";
			
			/*var arr_tglrevisi = dataRecord.TGLREVISI.split('-');
			var thn = arr_tglrevisi[0];
			var bln = arr_tglrevisi[1];
			var tgl = arr_tglrevisi[2];
			var set_tglrevisi = new Date(thn, (bln - 1), tgl);*/
			
			textfield_userid.val(dataRecord.user_id);
			textfield_username.val(dataRecord.user_name);
			textfield_userpass.val(dataRecord.user_pass);
			combofield_usergroup.find('input').val(dataRecord.group_name);
			if(dataRecord.user_aktif == 'Y'){
				radiofield_aktifyes.jqxRadioButton({ checked: true });
				radiofield_aktifno.jqxRadioButton({ checked: false });
			}else{
				radiofield_aktifyes.jqxRadioButton({ checked: false });
				radiofield_aktifno.jqxRadioButton({ checked: true });
			}
			
            
            formExpand();
            textfield_username.prop('disabled', true);
        }
		
        function gridExpand(){
			gridExpandVar = 1;
			formExpandVar = 0;
        	navbar.jqxNavigationBar('expandAt', 0);
        }
        function formExpand(){
			gridExpandVar = 0;
			formExpandVar = 1;
        	navbar.jqxNavigationBar('expandAt', 1);
        }
		function createNotice(msg){
            message_notice.html(msg);
            saving_notice.jqxWindow('show');
			saving_notice.jqxWindow('bringToFront');
        }
        /* END FUNCTION */
		
		navbar.bind('expandedItem', function (event) {
			if((event.item == 1) && (formExpandVar == 1) && (btn_user_task == "UPDATE")){
				user_task = "UPDATE";
			}else{
				user_task = "CREATE";
			}
		});
		
		navbar.jqxNavigationBar('expandAt', 0);
		navbar.jqxNavigationBar('collapseAt', 1);
		
	});
</script>

<style type="text/css">
    .text-input
    {
        height: 21px;
        width: 150px;
    }
    .register-table
    {
    	width: 350;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .register-table td, tr
    {
        margin: 0px;
        padding: 2px;
        border-spacing: 0px;
        border-collapse: collapse;
        font-family: Verdana;
        font-size: 12px;
    }
    h3 
    {
        display: inline-block;
        margin: 0px;
    }
    textarea
	{
	   resize: none;
	}
</style>

<div id='jqxNavigationBar'>
	<!--Header-->
	<div>Data</div>
	<!--Content-->
	<div>
		<div id="jqxgrid"></div>
	</div>
	<!--Header-->
	<div>Form Create/Update</div>
	<!--Content-->
	<div>
		<form id="userForm" action="#">
		<table class="register-table">
			<tr style="display: none;">
				<td align="right">USER ID:</td>
				<td align="left"><input id="user_id" class="text-input" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">USERNAME:</td>
				<td align="left"><input id="user_name" class="text-input" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">PASSWORD:</td>
				<td align="left"><input id="user_pass" class="text-input" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">GROUP:</td>
				<td align="left"><div id="user_group" class="text-input" ></div></td>
			</tr>
			<tr>
				<td align="right" valign="top">AKTIF:</td>
				<td align="left" valign="top"><div style="float: left; vertical-align: middle;" id='jqxRadioAktifYes'>Ya</div><div style="float: left;" id='jqxRadioAktifNo'>Tidak</div></td>
			</tr>
			<tr>
				<td align="right"></td>
				<td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
			</tr>
		</table>
		</form>
	</div>
</div>

<div style="margin-top: 10px;">
	<input id="createBtn" type="button" value="Create Data" />
</div>

<div id="saveGradeNotice">
    <div>Info</div>
    <div>
        <div id="eventLog"></div>
        <div style="float: right; margin-top: 15px;">
            <input type="button" id="ok" value="OK" style="margin-right: 10px" />
        </div>
    </div>
</div>